<template>
  <div class="thermalContent">
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
      class="chartForm"
    >
      <a-form-item label="电池堆">
        <a-select
          ref="select"
          v-model:value="form.linkId"
          class="formInput"
          allow-clear
          placeholder="请选择"
          @change="changeLink"
        >
          <a-select-option
            v-for="item in energyLinkList"
            :value="item.deviceId"
            :key="item.deviceId"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="电池簇">
        <a-select
          ref="select"
          v-model:value="form.blockId"
          class="formInput"
          allow-clear
          placeholder="请选择"
          :disabled="!form.linkId"
        >
          <a-select-option
            v-for="item in blockList"
            :value="item.deviceId"
            :key="item.deviceId"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="hotManageData"
        >查询</a-button
      >
    </a-form>
    <div class="thermalBox">
      <a-spin :spinning="loading">
        <a-card
          title="空调热管理参数"
          :headStyle="{
            backgroundColor: 'rgb(101, 101, 101)',
            textAlign: 'center',
          }"
          v-if="airHotManageInfo.length"
        >
          <template #extra
            ><span class="upDataBox"
              >数据更新时间：{{ airHotManageUpdateTime }}</span
            ></template
          >
          <div class="container">
            <div
              class="item"
              v-for="(item, index) in airHotManageInfo"
              :key="item.attrName"
            >
              <span>{{ item.name }}：</span>
              <span v-param="item.pdId">{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </a-card>
        <a-card
          title="液冷热管理参数"
          :headStyle="{
            backgroundColor: 'rgb(101, 101, 101)',
            textAlign: 'center',
          }"
          v-if="coolingInfo.length"
        >
          <template #extra
            ><span class="upDataBox"
              >数据更新时间：{{ coolingManageUpdateTime }}</span
            ></template
          >
          <div class="container">
            <div
              class="item"
              v-for="(item, index) in coolingInfo"
              :key="index"
            >
              <span>{{ item.name }}：</span>
              <span v-param="item.pdId">{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </a-card>
        <a-card
          v-if="otherHotManageInfo.length"
          title="其他热管理参数"
          :headStyle="{
            backgroundColor: 'rgb(101, 101, 101)',
            textAlign: 'center',
          }"
          style="margin-top: 30px"
        >
          <template #extra
            ><span class="upDataBox"
              >数据更新时间：{{ otherHotManageUpdateTime }}</span
            ></template
          >
          <div class="container">
            <div
              class="item"
              v-for="(item, index) in otherHotManageInfo"
              :key="index"
            >
              <span>{{ item.name }}：</span>
              <span v-param="item.pdId">{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </a-card>
      </a-spin>
    </div>
  </div>
</template>
<script setup>
import { backTopProps } from "ant-design-vue/es/float-button/interface";
;
const props = defineProps({
  stationInfo: {
    type: Number,
  },
});
const $api = inject("$api");
const form = ref({
  linkId: null,
  blockId: null,
});
const energyLinkList = ref([]);
const loading = ref(false);
const getEnergyLinkList = async () => {
  // 获取电池堆列表 如果不是主电池堆，需要拉取电池堆列表指定所属
  const res = await $api.energyLinkList({
    stationId: props.stationInfo.id,
  });
  if (res && res.code === 0) {
    energyLinkList.value = res?.data;
    form.value.linkId = energyLinkList.value?.[0]?.deviceId;
    return res.data;
  }
};
const changeLink = async (id) => {
  form.value.blockId = null;
  if (!!id) getBlockList(id);
};
const blockList = ref([]);
const getBlockList = async (id) => {
  const params = {
    stationId: props.stationInfo.id,
    linkId: id,
  };
  const res = await $api.powerBlockList(params);
  if (res && res.code === 0) {
    blockList.value = res.data;
    form.value.blockId = blockList.value?.[0].deviceId;
    return res.data;
  }
};
const airHotManageInfo = ref([]);
const coolingInfo = ref([]);
const otherHotManageInfo = ref([]);
const hotManageData = async () => {
  airHotManageInfo.value = [];
  coolingInfo.value = [];
  otherHotManageInfo.value = [];
  loading.value = true;
  const res = await $api.hotManage(props.stationInfo.id, form.value.blockId);
  loading.value = false;
  if (res && res.code === 0) {
    // type 1 是空调热管理参数  2 是液冷热管理参数  99 是其他热管理参数
    airHotManageInfo.value = res.data.filter((item) => item.type === 1);
    coolingInfo.value = res.data.filter((item) => item.type === 2);
    otherHotManageInfo.value = res.data.filter((item) => item.type === 99);
  }
};
const airHotManageUpdateTime = computed(() => {
  return airHotManageInfo.value.find((item) => !!item.value)?.dateTime || '-';
});
const coolingManageUpdateTime = computed(() => {
  return coolingInfo.value.find((item) => !!item.value)?.dateTime || '-';
});
const otherHotManageUpdateTime = computed(() => {
  return otherHotManageInfo.value.find((item) => !!item.value)?.dateTime || '-';
});
const handleChageStation = async () => {
  await getEnergyLinkList();
  await getBlockList(form.value.linkId);
  //切换电站后请求，获取数据
  hotManageData();
};
defineExpose({ handleChageStation });
</script>
<style lang="less" scoped>
.thermalContent {
  overflow-y: scroll;
  height: calc(100vh - 270px);
  .chartForm {
    margin-top: 20px;
  }
  .formInput {
    width: 180px !important;
  }
  .thermalBox {
    margin-top: 20px;
    .title {
      font-size: 20px;
      margin: 20px 0 12px 0;
    }
  }
  .upDataBox {
    color: #449cee;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 元素之间的间距 */
  }
  .item {
    // flex: 1 0 calc(16.66% - 10px); /* 可伸缩，不缩小，初始基础宽度约为 1/6 容器宽度并考虑间距 */
    padding: 10px;
    display: flex;
    min-width: 220px; /* 最小宽度，防止元素过窄 */
  }
  .item span:first-child {
    white-space: nowrap; /* 确保标题不换行 */
  }
  .item span:last-child {
    white-space: nowrap; /* 确保内容不换行 */
    font-style: italic; /* 内容的字体样式为斜体 */
  }
}
</style>
